<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <router-view></router-view>      <!--渲染视图，即显示 xxx.vue的内容, 不过注意，如果上面这几个标签不注释掉的话，同样也会显示出来-->
    <!--他下面默认（可能是main.js里的设置）应该就是先默认显示这个页面——App.vue，然后通过这个 router-view 标签找你设置的路由，通过你的路由显示你
    对应的页面 xxx.vue-->
    <!--就可能类似于把那你那个xxx.vue页面的内容替换到这个 router-view标签这里

        ！！！ 不   他不只是简单地内容替换  而是将xxx.vue中各组件标签等 渲染成正常的html元素
            各组件标签 如 <el-row>  <el-form-item>等，他自己的这些标签实际上会被渲染成一个自定义的css类（f12也可以看到）
            一个他组件里的label属性都可能被渲染成一个label标签，
            但在原xxx.vue页面中他并未经过渲染，
                （你直接把官网的样式代码拿过来放在xxx.vue的样式标签<style></style>里）
                所以他无法找到对应的html标签（如label）和css类（如.el-form-item））
                即对应样式在原页面xxx.vue是无法成功应用的  所以他可能会显示灰色（表明未使用

                而你把他的样式放在aap.vue里，他的样式可能会显示灰色（未引用），但实际上，样式都成功显示了
                （因为你是通过<router-view></router-view> 进行页面加载和视图渲染，
                在该页面并没有直接显式地出现这些类和标签，所以他出现一个灰色未引用，实际上是成功应用到了的，也是这个ide的一点问题吧。）

                最后，并不是所有样式你放在 xxx.vue中都不起效果的，
                在xxx.vue样式标签中不起效果的：
                    直接对他组件渲染后成为的css类（如.el-row  .el-form-item）等进行样式定义
                    直接对他组件渲染后成为的标签（如他<el-form-item></el-form-item>标签中的label属性会被渲染成一个label标签）进行样式定义
                在xxx.vue样式标签中能成功应用效果的：
                    直接自己定义css（自己的css类，而不是他渲染过后生成的css类），
                    将自己定义的css类应用在他组件上或普通标签（如我自己写一个a标签，不用他自己的文字链接组件）上
    -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  /*margin-top: 60px;*/
}

/*顶部导航栏  消息红点位置调整（如果有未读消息的话）*/
#top_nav_msg .el-badge__content{
    transform: translateY(150%) translateX(160%);
}


/*用于给 表格的行设置背景色*/
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

/*element ui 里的 日历组件没有设置大小  所以在这里使用 css 强制修改样式大小  -- 修改一下单元格的高度*/
#barDate .el-calendar-table .el-calendar-day{
    height: 50px;
}

/*个人信息页面  表单项 label文字*/
.personInfo .el-form-item label{
    color: #89919d;
}

/*贴吧页面  和展开表格有关的css类*/
.demo-table-expand{
    font-size: 0;
}
.demo-table-expand label{
    width: 130px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

/*由于element 他自带的 文字链接 有自己的字体设定  和我的字放在一起看着挺别扭的 所以这里简单自定义一下我的a链接的样式*/
.mylink{
    text-decoration: none;
    color: #409EFF;
}
.mylink:hover{
    text-decoration: underline;
    color: #42b983;
}

/*发表帖子页面  表单的 label标题（选择贴吧、标题、内容、选择图片等字样）*/
.publish_post_form label{
    color: #717171;
    font-size: 16px;
}

/*发表帖子 选择贴吧的第一个贴吧 设置左margin 10px  来对齐*/
.publish_post_bar label:first-child{
    margin-left: 10px;
}
/*发表帖子 选择贴吧  给每个贴吧选项设置margin-bottom 来隔开每一行的贴吧   （不然行与行之间太挤了）*/
.publish_post_bar label{
    margin-bottom: 7px;
}


/*给照片墙（多图片文件上传）  设置大小（small级别）  -- 已选中的图片 */
div[addPicSize^=small] ul li{
    height: 80px !important;
    width: 80px !important;
}
/*给照片墙（多图片文件上传）  设置大小（small级别）  -- 添加图片的加号框 */
div[addPicSize^=small] ul+div{
    height: 80px !important;
    width: 80px !important;
    line-height: 80px;
}
/* 在“评论回复框”中 的 照片墙（多图片文件上传）设置*/
.reply_frame div[addPicSize^=small] ul li{
    margin-bottom: -10px !important;
}


/*给照片墙（多图片文件上传）  设置大小（medium级别）  -- 已选中的图片 */
div[addPicSize^=medium] ul li{
    height: 100px !important;
    width: 100px !important;
}
/*给照片墙（多图片文件上传）  设置大小（medium级别）  -- 添加图片的加号框 */
div[addPicSize^=medium] ul+div{
    height: 100px !important;
    width: 100px !important;
    line-height: 100px;
}



/*因为 el-form-item  自带22px的下margin， 在“评论回复框”中不合适，这里将其去除*/
.reply_frame .el-form-item{
    margin-bottom: 15px;  /*因为涉及到 表单验证的错误提示  所以其实还是需要留一点空间的*/
}
.reply_frame .el-form-item label{  /*顺便把他label的  下padding也去了*/
    padding: 0;
}




</style>
